import { Graph, IKeyboardEvent, IPointerEvent, NodeData, treeToGraphData } from "@antv/g6";
import { useCallback, useEffect, useRef } from "react";
import { treeData } from "./qfg4data";

interface INodeData extends NodeData {
  data?: { label: string; width: number; height: number };
}

const getNodeSide = (graph, datum) => {
  const parentData = graph.getParentData(datum.id, "tree");
  if (!parentData) return "center";
  return datum.style.x > parentData.style.x ? "right" : "left";
};

const ChartDemo1 = () => {
  const ref = useRef<HTMLDivElement & { graph?: Graph }>(null);

  const getData = useCallback(() => {
    // return fetch("https://assets.antv.antgroup.com/g6/combo.json")
    // .then((res) => res.json())
    // .then((data) => {

    const graph = ref.current.graph;

    let data = { id: "root", label: "跟", children: treeData };
    let gd = treeToGraphData(data, {
      getNodeData: (datum, depth) => {
        if (!datum.style) datum.style = {};
        // datum.style.collapsed = depth >= 2;
        if (!datum.children) return datum;
        const { children, ...restDatum } = datum;
        return {
          ...restDatum,
          children: children.map((child) => child.id),
        } as any;
      },
    });

    graph.setData(gd);
    graph.render();
    // });
  }, []);

  useEffect(() => {
    const graph = new Graph({
      container: ref.current,
      background: "#F2F7FA",
      autoFit: "center",
      node: {
        style: {
          labelText: (d: any) => d.label,
          labelBackground: true,
          labelPlacement: function (d) {
            return "bottom";
          },
          ports: [{ placement: "right" }, { placement: "left" }],
        },
        animation: {
          enter: false,
        },
      },
      edge: {
        type: "cubic-horizontal",
        animation: {
          enter: false,
        },
      },
      layout: {
        type: "antv-dagre",
        rankdir: 'LR',
        nodeSize: [30, 30],
        nodesep: 60,
        ranksep: 40,
        controlPoints: true,

        // type: "mindmap",
        // direction: "H",
        // getHeight: () => 32,
        // getWidth: () => 32,
        // getVGap: () => 12,
        // getHGap: () => 64,
      },
      behaviors: [
        {
          key: "lasso-select",
          type: "lasso-select",
          mode: "diff",
          trigger: "shift",
          style: {
            fill: "#00f",
            fillOpacity: 0.1,
            stroke: "#0ff",
            lineWidth: 2,
          },
        },
        {
          key: "drag-canvas",
          type: "drag-canvas",
          enable: (ev: IPointerEvent | IKeyboardEvent) => {
            if (ev.shiftKey || (ev as any).targetType !== "canvas") {
              return false;
            }
            return true;
          },
        },
        "collapse-expand",
        "drag-element",
        "zoom-canvas",
      ],
      animation: false,
    });

    ref.current.graph = graph;
    graph.render();

    getData();
  }, []);

  return (
    <>
      <h2>官方：脑图树示例</h2>
      <div ref={ref} style={{ width: "100%", minHeight: 600 }}></div>
    </>
  );
};

export default ChartDemo1;
